<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
  mounted(){
    let myChart=echarts.init(this.$refs.myChart)
    let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    let data=[150, 230, 224, 218, 135, 147, 260]
    let option = {
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data,
      type: 'line',
      smooth: true,
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' },
										]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    
  ],
    dataZoom: [//用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
    {
      type: 'slider',//滑动条型数据区域缩放组件
      xAxisIndex: 0,//x轴设置
      filterMode: 'none'//设置-----数据过滤不过滤数据，只改变数轴范围
    },
    {
      type: 'slider',
      yAxisIndex: 0,//y轴设置
      filterMode: 'none'
    },
 
  ],
};
    // 4.设置图表绘制图表
    myChart.setOption(option)
  }
}
</script>
<style>
#myChart{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>